<template>
	<div class="box">
		<div class="head">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path:'/order' }"><span style="font-size: 18px;">订单管理</span>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="main">
			<div class="top">
				<span style="margin-left: 10px;">订单类型:</span>
				<select v-model="state" style="width: 150px;">
					<option value="0">请选择</option>
					<option value="1">我想买个房</option>
					<option value="2">二手房出租</option>
					<option value="3">有房出租</option>
					<option value="4">我想租个房</option>
				</select>
				<span style="margin-left: 10px;">搜索:</span>
				<input type="text" placeholder="请输入用户名" v-model="ss">
				<button :class="isActive?'buttontwo':'button'" @click="seach()">查询</button>
			</div>
			<div class="form">
				<template>
					<el-table :data="tableData" style="width: 100%;">
						<el-table-column prop="id" label="序号" width="180">
						</el-table-column>
						<el-table-column prop="order" label="编号" width="180">
						</el-table-column>
						<el-table-column prop="user_nickName" label="用户名">
						</el-table-column>
						<el-table-column prop="user_phone" label="手机号">
						</el-table-column>
						<el-table-column prop="house_state" label="类型">
						</el-table-column>
						<el-table-column prop="price" label="支付金额">
						</el-table-column>
						<el-table-column prop="mouth" label="支付月数">
						</el-table-column>
						<el-table-column prop="time" label="支付时间">
						</el-table-column>
						<el-table-column prop="cz" label="操作">
							<template slot-scope="scope">
								<span class="jr" @click="del(scope.row.id)">删除</span>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				ss: '',
				isActive: false,
				state:0
			}
		},
		watch: {
			ss(e) {
				if (e.length > 0) {
					this.isActive = true
				} else {
					this.isActive = false
				}
			},
			state(e) {
				if (e.length > 0) {
					this.isActive = true
				} else {
					this.isActive = false
				}
				if(e == 0){
					this.isActive = false
				}
			}
		},
		mounted() {
			this.getorder()
		},
		methods: {
			del(id) {
				var _this = this
				axios.get('/delorder', {
					params: {
						id
					}
				}).then(function(res) {
					console.log(res)
					_this.getorder()
				})
			},
			seach() {
				var _this = this
				// console.log(this.set)
				axios.get('/getorder', {
					params: {
						name: this.ss,
						state:this.state
					}
				}).then(function(res) {
					console.log(res)
					_this.tableData = res.data.res
					for (var i = 0; i < _this.tableData.length; i++) {
						if (_this.tableData[i].house_state == 1) {
							_this.tableData[i].house_state = '我想买个房'
						} else if (_this.tableData[i].house_state == 2) {
							_this.tableData[i].house_state = '二手房出租'
						} else if (_this.tableData[i].house_state == 3) {
							_this.tableData[i].house_state = '有房出租'
						} else if (_this.tableData[i].house_state == 4) {
							_this.tableData[i].house_state = '我想租个房'
						}
					}
				})
			},
			getorder() {
				var _this = this
				axios.get('/getorder').then(function(res) {
					console.log(res)
					if (res.data.code == 200) {
						_this.tableData = res.data.res
						for (var i = 0; i < _this.tableData.length; i++) {
							if (_this.tableData[i].house_state == 1) {
								_this.tableData[i].house_state = '我想买个房'
							} else if (_this.tableData[i].house_state == 2) {
								_this.tableData[i].house_state = '二手房出租'
							} else if (_this.tableData[i].house_state == 3) {
								_this.tableData[i].house_state = '有房出租'
							} else if (_this.tableData[i].house_state == 4) {
								_this.tableData[i].house_state = '我想租个房'
							}
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.box {
		width: 100%;
		height: 80%;
	}

	.head {
		width: 100%;
		height: 5%;
	}

	.top {
		width: 100%;
		height: 60px;
		line-height: 60px;
		text-align: left;
	}

	/deep/.el-dialog {
		width: 30%;
	}

	/deep/ .el-table thead th.el-table__cell {
		background-color: #f5f5f5;
		text-align: center;
	}

	/deep/ .el-table--enable-row-transition .el-table__body td.el-table__cell {
		text-align: center;
	}

	/deep/ .el-table td.el-table__cell,
	.el-table th.el-table__cell.is-leaf {
		border: 1px solid #EBEEF5;
		;
	}

	.main {
		width: 100%;
		height: 700px;
		background: #FFFFFF;
	}

	.jr {
		color: #6e9eec;
		margin-left: 10px;
		text-decoration: none;
	}

	.button {
		margin-left: 10px;
		background: gray;
		color: #fff;
		border: none;
	}

	.buttontwo {
		margin-left: 15px;
		background: #0099FF;
		color: #fff;
		border: none;
	}

	.add {
		width: 400px;
		height: 500px;
		background: red;
	}
</style>
